<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>树型表格</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

    <!--查询框-->
    <script type="text/html" id="default-toolbarDemo">
        <div class="layui-btn-container">
            <form id="default-search-form" lay-filter='default-search-form' class="layui-form layui-form-pane" onsubmit="return false;">
                <div class="layui-form-item" style="margin-bottom: 0px;">
                    <div class="layui-inline-sm">
                        <label class="layui-form-label">关键字</label>
                        <div class="layui-input-inline">
                            <input type="keyword" name="keyword" lay-affix="clear" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline-sm">
                        <button type="button" class="layui-btn layui-btn" id="default-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        <button type="reset" class="layui-btn layui-btn swiper-right-form-reset" id="default-reset-btn">重 置</button>

                        <button type="button" class="layui-btn layui-btn layui-btn-normal" id="default-add-btn">
                            <i class="layui-icon layui-icon-add-1"></i> 新 增
                        </button>
                        <button type="button" class="layui-btn layui-btn layui-btn-danger" id="default-delete-btn">
                            <i class="layui-icon layui-icon-delete"></i> 删 除
                        </button>

                    </div>
                </div>
            </form>
        </div>
    </script>

    <!--表格-->
    <div style="padding: 16px;">
        <div class="layui-card">
            <div class="layui-card-body">
                <table class="layui-hide" id="default-table" lay-filter="default-table"></table>
            </div>
        </div>
    </div>

    <!--表格列-->
    <script type="text/html" id="default-barDemo">
      <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="more">
          更多
          <i class="layui-icon layui-icon-down"></i>
        </a>
      </div>
    </script>

    <!--弹出框-->
    <form id="default-layer-form" lay-filter='default-layer-form' class="layui-form"
          style="display :none ;z-index: 100002;padding: 16px;">
        <div class="layui-form-item"  style="display :none ;">
            <input type="text" name="id">
        </div>

        <div class="layui-form-item" style="margin-top: 10px;">
            <div class="layui-inline">
                <label class="layui-form-label">分组代码</label>
                <div class="layui-input-block">
                    <input type="text" name="groupCode" lay-reqtext="分组代码" placeholder="请输入分组代码"
                            lay-verify="groupCode" value="" class="layui-input" style="width: 280px;">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">分组名称</label>
                <div class="layui-input-block">
                    <input type="text" name="groupName" placeholder="请输入分组名称" lay-verType="tips"
                           lay-verify="required" lay-reqtext="请输入分组名称" value="" class="layui-input" style="width: 280px;">
                </div>
            </div>
        </div>


        <div class="layui-form-item" style="margin-top: 10px;">
            <div class="layui-inline">
                <label class="layui-form-label">字典代码</label>
                <div class="layui-input-block">
                    <input type="text" name="code" placeholder="请输入字典代码"
                           lay-verify="required" lay-reqtext="请输入字典代码" value="" class="layui-input" style="width: 280px;">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">字典名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" placeholder="请输入字典名称"
                           lay-verify="required" lay-reqtext="请输入字典名称"  value="" class="layui-input" style="width: 280px;">
                </div>
            </div>
        </div>



        <div class="layui-form-item" style="margin-top: 10px;">
            <div class="layui-inline">
                <label class="layui-form-label">字典值</label>
                <div class="layui-input-block" style="width: 280px;">
                    <input type="text" name="value" placeholder="请输入字典值"
                           lay-verify="required" lay-reqtext="请输入字典值" value="" class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label"> 状态</label>
                <div class="layui-input-block" style="width: 280px;">
                    <div lay-filter="stateIds" id="stateIds"  placeholder="请选择状态"
                         layVerify="required" layVerType="tips"></div>
                </div>
<!--                <div style="display :none ;">-->
<!--                    <input type="text" name="state" lay-verify="state" lay-reqtext="请选择状态">-->
<!--                </div>-->
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block"  style="width: 685px;">
                    <textarea name="remark" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
        </div>
    </form>

    <!--脚本-->
    <script>
        layui.use(['form','table','myUtil','myComp'], function () {
            var $ = layui.jquery;
            var myUtil = layui.myUtil;
            var myComp = layui.myComp;
            var treeTable = layui.treeTable;
            var that = this;
            console.log('page init start...')

            //渲染下拉列表
            this.mySelect = myComp.defaultxmSelect({
                el:'#stateIds',
                layVerify: 'required',
                layReqText:'请选择状态',
                // layVerType: 'tips',
                data:[{name: "启用", value: 1,selected:false},{name: "禁用", value: 0,selected:false}]
            });

            // 渲染
            treeTable.render({
                elem: '#default-table',
                url: "admin/data/tree-table.json", // 此处为静态模拟数据，实际使用时需换成真实接口
                tree: {
                    /*
                    // 异步加载子节点
                    async: {
                      enable: true,
                      url: '/static/json/2/treeTable/demo-async.json', // 此处为静态模拟数据，实际使用时需换成真实接口
                      autoParam: ["parentId=id"]
                    }
                    */
                },
                maxHeight: '701px',
                toolbar: '#default-toolbarDemo',
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'},
                    {field: 'name', title: '用户名', width: 200, fixed: 'left'},
                    {field: 'sex', title: '性别', width: 80, sort: true},
                    {field: 'experience', title: '积分', width: 90, sort: true},
                    {field: 'city', title: '城市', width: 380},
                    { fixed: "right", title: "操作", width: 190, align: "center", toolbar: '#default-barDemo'}
                ]],
                page: true
            });


            // 校验表单
            var verifyDataFn = function (data) {
                // return [{text:'状态不能为空'}]
            }
            // 重置表单
            var initFormDataFn = function (operateFormLayId) {
                myUtil.resetForm(operateFormLayId);
                that.mySelect.setValue([])
            }
            // 表单数据 转 实体数据
            var formToDataFn = function (formData) {
                var data = myUtil.deepCopy(formData);
                data.state = myUtil.arrToStr(that.mySelect.getValue())
                return data;
            }
            // 实体数据 转 表单数据
            var dataToFormFn = function (data) {
                var formData = myUtil.deepCopy(data);
                that.mySelect.setValue([formData.state])
                return formData;
            }
            // 初始化页面
            var pageObj = {
                verifyDataFn:verifyDataFn,
                initFormDataFn:initFormDataFn,
                formToDataFn:formToDataFn,
                dataToFormFn:dataToFormFn,
                operateUrl: '/tool/v1/api/Admin_Dict/operate'
            }
            myComp.initPage(this, pageObj);

        });
    </script>

</body>

</html>